import React, { Component } from 'react'
// import mjj from "../../../assets/images/mjj.jpg"
import styles from "./topBar.module.scss"
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
import Lazy from "../../../utils/imgLazyLoad"
/*
    这是商铺页面上面的商家信息及优惠组件，小组件
    导入到了pages/FoodStore/index.js中
    覃金波 2020年8月22日17:48:02

*/
class TopBar extends Component {

    toHome = () => {
        this.props.history.push("/")
    }

    render() {

        return (
            <div>
                <div className={styles.topBar}>
                    {/* 深灰色背景栏 */}
                    <div className={styles.greyBg}>
                        <div className={styles.bgTop}>
                            <span onClick={this.toHome} className={styles.ToHome}>
                                {/* 回到首页 */}
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-zuojiantou-copy"></use>
                                </svg>
                            </span>
                            <span className={styles.search}>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-fangdajing1"></use>
                                </svg>
                            </span>
                            <span className={styles.collect}>收藏</span>
                            <span className={styles.share}>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-shenglvehao"></use>
                                </svg>
                            </span>
                        </div>
                        <div className={styles.bgCenter}>
                            <svg className="icon" aria-hidden="true">
                                <use href="#icon-u36"></use>
                            </svg>
                        </div>
                    </div>
                    {/* 商铺详情信息栏 */}
                    <div className={styles.storeMsg}>
                        {/* 商铺名称，图片第一一栏 */}
                        <div className={styles.msgTop}>
                            <div className={styles.topLeft}>
                                <h2>{this.props.storeMsg.shopName}</h2>
                                <div className={styles.leftMsg}>
                                    <span className={styles.sendName}>吃了么专送</span>
                                    <div className={styles.allMsg}>
                                        <span className={styles.sendTime}>约37分钟</span>
                                        <span className={styles.saleNum}>月售{this.props.storeMsg.monthlySales}</span>
                                        <span className={styles.pickUp}>可自取</span>
                                    </div>
                                </div>

                            </div>
                            <div className={styles.rightMsg}>
                                <Lazy src={Object.keys(this.props.storeMsg).length !== 0 ? "http://175.24.122.212:9090/" + this.props.storeMsg.shopPhotos : ""} alt="图片" />
                            </div>

                        </div>
                        {/* 商铺名称，第二栏公告 */}
                        <div className={styles.noticeMsg}>
                            <p className={styles.notice}>
                                公告：欢迎光临！用餐高峰请提前下单，谢谢！有问题...
                            </p>
                        </div>
                        {/* 商铺名称，第三栏 领取红包 */}
                        <div className={styles.redPK}>
                            <span className={styles.packet}>￥{Object.keys(this.props.storeMsg).length !== 0 ? this.props.storeMsg.shopDiscount : ""}</span>
                            <span className={styles.change}>领</span>
                        </div>
                        {/* 商铺名称，第四栏 满减信息 */}
                        <div className={styles.subPrice}>
                            <span className={styles.subMsg}>1元津贴</span>
                            <span className={styles.subMsg}>首次光顾减1</span>
                            <span className={styles.subMsg}>满25减24</span>
                            <span className={styles.subMsg}>满80减40</span>
                        </div>
                    </div>


                </div>
            </div>
        )
    }
}
const mapPropsToState = (state) => {
    return {
        state: state.foodStoreReducer.selectedNav,
        top: state.foodStoreReducer.offsetTop
    }
}
const mapActionToState = (dispatch) => {
    return {
        changeActive(name) {
            dispatch({
                type: name
            })
        },
        changeOffsetTop() {
            let top = document.documentElement.scrollTop;
            dispatch({
                type: top
            })
        }
    }
}

export default connect(mapPropsToState, mapActionToState)(withRouter(TopBar))